<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> -->
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">

  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
  <style>
    .tab-head a.active {
      /* content: "";
      position: absolute;
      left: 20px;
      bottom: -1px;
      width: 72px;
      height: 2px; 
        background: #27ba9b;*/
      padding-bottom: 22px;
      border-bottom: 2px solid #27ba9b;

    }
  </style>
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="javascript:;">请先登录</a>
        </li>
        <li>
          <a href="javascript:;">免费注册</a>
        </li>
        <li>
          <a href=".javascript:;">我的订单</a>
        </li>
        <li>
          <a href="javascript:;">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">首页</a>
          </li>
          <li>
            <a href="javascript:;">生鲜</a>
          </li>
          <li>
            <a href="javascript:;">美食</a>
          </li>
          <li>
            <a href="javascript:;">餐厨</a>
          </li>
          <li>
            <a href="javascript:;">电器</a>
          </li>
          <li>
            <a href="javascript:;">居家</a>
          </li>
          <li>
            <a href="javascript:;">洗护</a>
          </li>
          <li>
            <a href="javascript:;">孕婴</a>
          </li>
          <li>
            <a href="javascript:;">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="javascript:;" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
        </div>
      </div>
    </div>
  </div>

  <!-- 头部sticky定位 添加show类名可以显示 -->
  <div class="sticky">
    <div class="header-sticky container">
      <div class="sticky-logo">
        <h1>
          <a href="#"></a>
        </h1>
      </div>
      <ul class="sticky-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">服饰</a></li>
        <li><a href="#">母婴</a></li>
        <li><a href="#">个护</a></li>
        <li><a href="#">严选</a></li>
        <li><a href="#">数码</a></li>
        <li><a href="#">运动</a></li>
        <li><a href="#">杂项</a></li>
      </ul>
      <div class="sticky-right">
        <a href="#">品牌</a>
        <a href="#">专题</a>
      </div>
    </div>
  </div>

  <!-- 返回顶部 -->
  <div class="backTop">
    <i class="backIcon"></i>
    <p>顶部</p>
  </div>

  <div class="xtx-wrapper">
    <div class="container">
      <!-- 面包屑 -->
      <div class="xtx-bread">
        <a href="javascript:;"> 首页 > </a>
        <a href="javascript:;"> 居家 > </a>
        <a href="javascript:;"> 茶伽酒具 > </a>
        <span>黑马专属茶具</span>
      </div>
      <!-- 商品信息 -->
      <div class="xtx-product-info">
        <div class="left">
          <div class="pictrue">
            <div class="middle">
              <img src="./images/1.jpg" alt="">
              <div class="layer"></div>
            </div>
            <div class="small">
              <ul>
                <li class="active"><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/3.jpg" alt=""></li>
                <li><img src="./images/4.jpg" alt=""></li>
                <li><img src="./images/5.jpg" alt=""></li>
              </ul>
            </div>
            <div class="large"></div>
          </div>
          <div class="other">
            <ul>
              <li>
                <p>销量人气</p>
                <p>1999+</p>
                <p>销量人气</p>
              </li>
              <li>
                <p>商品评价</p>
                <p>999+</p>
                <p>查看评价</p>
              </li>
              <li>
                <p>收藏人气</p>
                <p>299+</p>
                <p><a href="javascript:;">收藏商品</a></p>
              </li>
              <li>
                <p>品牌信息</p>
                <p>小米</p>
                <p><a href="javascript:;">品牌主页</a></p>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <h3 class="name">黑马专属茶具-高薪牌</h3>
          <p class="desc">慢品生活，山水相伴，高薪专属</p>
          <p class="price"><span class="now">¥1899</span><span class="old">¥2999</span></p>
          <div class="address">
            <div class="item">
              <div class="dt">促销</div>
              <div class="dd">12月好物放送，App领券购买直降120元</div>
            </div>
            <div class="item">
              <div class="dt">配送</div>
              <div class="dd">至
                <div class="box">
                  <span>陕西 西安 <i></i></span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="dt">服务</div>
              <div class="dd">
                <span class="fw">无忧退货</span>
                <span class="fw">快速退款</span>
                <span class="fw">免费包邮</span>
                <a href="#" class="lj">了解详情</a>
              </div>
            </div>
          </div>
          <div class="attrs">
            <div class="item">
              <div class="dt">颜色</div>
              <div class="dd" id="color">
                <img src="./uploads/img/cate-06.png" alt="">
                <img src="./uploads/img/cate-07.png" alt="">
              </div>
            </div>
            <div class="item">
              <div class="dt">尺寸</div>
              <div class="dd" id="size">
                <span class="size">22英寸</span>
                <span class="size">42英寸</span>
                <span class="size">52英寸</span>
                <span class="size">62英寸</span>
              </div>
            </div>
            <div class="item">
              <div class="dt">数量</div>
              <div class="dd">
                <div class="num">
                  <a href="javascript:;">-</a>
                  <input type="text" value="1">
                  <a href="javascript:;">+</a>
                </div>
              </div>
            </div>
            <div class="item">
              <a class="buy" href="javascript:;">立即购买</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 同类产品推荐 -->
      <div class="xtx-relevant-product">
        <h3>同类产品推荐</h3>
        <ul>
          <li>
            <a href="#">
              <img src="./uploads/history_goods_1.jpg" alt="">
              <p class="name">USB Type C数据线</p>
              <p class="desc">快速充电，稳定传输</p>
              <p class="price">¥39</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/history_goods_2.jpg" alt="">
              <p class="name">红米Note 5A 高配版</p>
              <p class="desc">1600万像素柔光自拍</p>
              <p class="price">¥1899</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/history_goods_3.jpg" alt="">
              <p class="name">VGA网口多功能转接器</p>
              <p class="desc">小巧便携，节省桌面空间</p>
              <p class="price">¥19</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/history_goods_4.jpg" alt="">
              <p class="name">笔记本Pro 15.6"</p>
              <p class="desc">全金属强化机身搭配独显</p>
              <p class="price">¥4899</p>
            </a>
          </li>
        </ul>
        <a href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a>
        <a href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a>
      </div>
      <!-- 商品详情 -->
      <div class="xtx-product-detail">
        <div class="main">
          <div class="cont">
            <div class="tab-head">
              <a href="javascript:;" class="active" data-id="2">商品详情</a>
              <a href="javascript:;" data-id="3">商品评价<span>（998+）</span></a>
            </div>
            <div class="tab-pane" style="display: block;">
              <!-- 静态属性 -->
              <div class="attrs">
                <div class="item"><span>商品名称：</span><span>黑马专属茶具 </span></div>
                <div class="item"><span>商品编号：</span><span>4620979 </span></div>
                <div class="item"><span>商品毛重：</span><span>8.0kg </span></div>
                <div class="item"><span>商品产地：</span><span>中国大陆 </span></div>
                <div class="item"><span>屏幕尺寸：</span><span>32英寸及以下 </span></div>
                <div class="item"><span>能效等级：</span><span>三级能效 </span></div>
                <div class="item"><span>电视类型：</span><span>人工智能 </span></div>
                <div class="item"><span>选购指数：</span><span>6.9-6.0 </span></div>
                <div class="item"><span>观看距离：</span><span>2m以下（≤32英寸）</span></div>
              </div>
              <!-- 详情内容 -->
              <div class="detail">
                <img src="https://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg" alt=""
                  data-v-2c43c764=""><img src="https://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpg"
                  alt="" data-v-2c43c764=""><img
                  src="https://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt=""
                  data-v-2c43c764=""><img src="https://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpg"
                  alt="" data-v-2c43c764=""><img
                  src="https://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg" alt=""
                  data-v-2c43c764=""><img src="https://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpg"
                  alt="" data-v-2c43c764="">
              </div>
            </div>
            <div class="tab-pane" style="display: none;">
              <div class="goods-tabs">
                <div class="tabs-hd">
                  <span>排序：</span>
                  <!-- tabs切换按钮 -->
                  <ul>
                    <li class="active"><a href="#">默认</a></li>
                    <li><a href="#">最新</a></li>
                    <li><a href="#">最热</a></li>
                  </ul>
                </div>
                <div class="tabs-bd">
                  <!-- 默认tabs隐藏   切换show类名显示 -->
                  <!-- 默认评论模块 -->
                  <div class="tabs tabs-default show">
                    <!-- tabs-item 每一个评论列表 -->
                    <div class="tabs-item">
                      <div class="userInfo">
                        <span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span>
                        <span class="username">兔****y</span>
                      </div>
                      <div class="tbs-body">
                        <div class="score">
                          <!-- 切换xingxing 和 xingxing1 可以改变星星样式 -->
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing1"></i>
                          <i class="iconfont icon-xingxing1"></i>
                          <span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
                        </div>
                        <div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
                        <div class="comment-image">
                          <div class="list">
                            <a class="" href="javascript:;">
                              <img src="./uploads/1.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/2.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/3.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/4.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/5.webp" alt="">
                            </a>

                          </div>
                          <!---->
                        </div>
                        <div class="time">
                          <span>2021-04-03 13:20:32</span>
                          <span class="zan"><i class="iconfont icon-dianzan"></i>74</span>
                        </div>
                      </div>
                    </div>
                    <!-- tabs-item 每一个评论列表 -->
                    <div class="tabs-item">
                      <div class="userInfo">
                        <span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span>
                        <span class="username">兔****y</span>
                      </div>
                      <div class="tbs-body">
                        <div class="score">
                          <!-- 切换xingxing 和 xingxing1 可以改变星星样式 -->
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing1"></i>
                          <i class="iconfont icon-xingxing1"></i>
                          <span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
                        </div>
                        <div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
                        <div class="comment-image">
                          <div class="list">
                            <a class="" href="javascript:;">
                              <img src="./uploads/1.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/2.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/3.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/4.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/5.webp" alt="">
                            </a>

                          </div>
                          <!---->
                        </div>
                        <div class="time">
                          <span>2021-04-03 13:20:32</span>
                          <span class="zan"><i class="iconfont icon-dianzan"></i>74</span>
                        </div>
                      </div>
                    </div>
                    <!-- tabs-item 每一个评论列表 -->
                    <div class="tabs-item">
                      <div class="userInfo">
                        <span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span>
                        <span class="username">兔****y</span>
                      </div>
                      <div class="tbs-body">
                        <div class="score">
                          <!-- 切换xingxing 和 xingxing1 可以改变星星样式 -->
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing"></i>
                          <i class="iconfont icon-xingxing1"></i>
                          <i class="iconfont icon-xingxing1"></i>
                          <span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
                        </div>
                        <div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
                        <div class="comment-image">
                          <div class="list">
                            <a class="" href="javascript:;">
                              <img src="./uploads/1.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/2.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/3.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/4.webp" alt="">
                            </a>
                            <a class="" href="javascript:;">
                              <img src="./uploads/5.webp" alt="">
                            </a>

                          </div>
                          <!---->
                        </div>
                        <div class="time">
                          <span>2021-04-03 13:20:32</span>
                          <span class="zan"><i class="iconfont icon-dianzan"></i>74</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 最新评论模块 -->
                  <div class="tabs tabs-new"></div>
                  <!-- 最热评论模块 -->
                  <div class="tabs tabs-hot"></div>
                </div>

                <!-- 翻页在这里 -->
                <div class="xtx-pagination">
                  <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- 注意事项 -->
          <div class="warn">
            <h3>注意事项</h3>
            <p class="tit">• 购买运费如何收取？ </p>
            <p>单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
            <br>
            <br>
            <p class="tit">• 使用什么快递发货? </p>
            <p>默认使用顺丰快递发货(个别商品使用其他快递） </p>
            <p>配送范围覆盖全国大部分地区(港澳台地区除外）。 </p>
            <br>
            <br>
            <p class="tit">• 如何申请退货? </p>
            <p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
            <p>2.内裤和食品等特殊商品无质量问题不支持退货； </p>
            <p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
            <p>4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p>
          </div>
        </div>
        <div class="aside">
          <div class="tit">24小时热销榜</div>
          <div class="product">
            <img src="./uploads/fresh_goods_3.jpg" alt="">
            <p class="name">USB Type C数据线</p>
            <p class="desc">快速充电，稳定传输</p>
            <p class="price">¥29</p>
          </div>
          <div class="product">
            <img src="./uploads/fresh_goods_3.jpg" alt="">
            <p class="name">USB Type C数据线</p>
            <p class="desc">快速充电，稳定传输</p>
            <p class="price">¥29</p>
          </div>
          <div class="product">
            <img src="./uploads/fresh_goods_3.jpg" alt="">
            <p class="name">USB Type C数据线</p>
            <p class="desc">快速充电，稳定传输</p>
            <p class="price">¥29</p>
          </div>
          <div class="tit">专题推荐</div>
          <div class="special">
            <img src="./uploads/discuss_goods_1.jpg" alt="">
            <p class="name">一往无前，诞生于崛起</p>
          </div>
          <div class="special">
            <img src="./uploads/discuss_goods_1.jpg" alt="">
            <p class="name">一往无前，诞生于崛起</p>
          </div>
          <div class="special">
            <img src="./uploads/discuss_goods_1.jpg" alt="">
            <p class="name">一往无前，诞生于崛起</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 1. 顶部导航开始不显示
    // 2. 等页面滑到主导航栏，这个新顶部导航栏滑动下拉显示，并且改为固定定位
    // 3. 等页面滑到上面，新顶部导航栏隐藏
  </script>
  <script src="./js/jQuery.min.js"></script>
  <script src="./js/product.js"></script>
</body>

</html>